<template>
	<div v-if="isLoading" class="loading-overlay">
		<div class="loading-spinner"></div>
	</div>
</template>

<script setup>
	import {computed} from 'vue';
	
	import { useStore } from 'vuex';
	const store = useStore();
	
	const isLoading = computed(() => {
		return store.state.isLoading;
	})
</script>

<style>
	
	.loading-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.55);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}
	
	
	.loading-spinner {
		width: 30px;
		height: 30px;
		border: 2px solid #fff;
		border-top-color: transparent;
		border-radius: 100%;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		0% {
			transform: rotate(0)
		}

		to {
			transform: rotate(360deg)
		}
	}
</style>